<template>
    <div class="help-container">
        <!-- 头部区域 -->
        <div class="header-section">
            <h1 class="page-title">💬 论坛交流</h1>
            <p class="page-subtitle">分享知识，交流经验，共同成长</p>
            <el-button type="primary" size="large" @click="router.push('/help/create')" class="create-btn">
                <i class="el-icon-plus"></i> 发布新帖子
            </el-button>
        </div>

        <!-- 帖子列表 -->
        <div class="posts-container">
            <div v-for="post in helpList" :key="post.id" class="post-card" @click="handleClick(post)">
                <div class="post-header">
                    <div class="user-info">
                        <el-avatar :src="post.avatar" :size="40" class="user-avatar">
                            {{ post.nickname?.charAt(0) }}
                        </el-avatar>
                        <div class="user-details">
                            <div class="username">{{ post.nickname }}</div>
                            <div class="post-time">{{ formatDate(post.gmtCreate) }}</div>
                        </div>
                    </div>
                    <div class="post-actions">
                        <el-button type="text" size="small" class="action-btn">
                            <i class="el-icon-chat-dot-round"></i>
                        </el-button>
                    </div>
                </div>

                <div class="post-content">
                    <h3 class="post-title">{{ post.content }}</h3>
                </div>

                <div class="post-footer">
                    <div class="post-stats">
                        <span class="stat-item">
                            <i class="el-icon-view"></i>
                            <span>浏览</span>
                        </span>
                        <span class="stat-item">
                            <i class="el-icon-chat-dot-round"></i>
                            <span>回复</span>
                        </span>
                        <span class="stat-item">
                            <i class="el-icon-star-off"></i>
                            <span>收藏</span>
                        </span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 分页 -->
        <div class="pagination-container">
            <el-pagination
                    :current-page="page"
                    :page-size="limit"
                    :total="total"
                    @current-change="handlePageChange"
                    layout="prev, pager, next, jumper, total"
                    background
            />
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getHelpList } from '../api/help'
import { useRouter } from 'vue-router'

const helpList = ref([])
const page = ref(1)
const limit = ref(10)
const total = ref(0)
const router = useRouter()

const formatDate = (dateStr) => {
    if (!dateStr) return ''
    const date = new Date(dateStr)
    const now = new Date()
    const diff = now - date

    if (diff < 60000) return '刚刚'
    if (diff < 3600000) return `${Math.floor(diff / 60000)}分钟前`
    if (diff < 86400000) return `${Math.floor(diff / 3600000)}小时前`
    if (diff < 2592000000) return `${Math.floor(diff / 86400000)}天前`

    return date.toLocaleDateString('zh-CN')
}

const fetchList = async () => {
    try {
        const res = await getHelpList(page.value, limit.value)
        if (res.data && res.data.success) {
            // 只顯示主帖（parentId 為空或 null）
            helpList.value = (res.data.data.list || []).filter(item => !item.parentId)
            total.value = helpList.value.length
        }
    } catch (error) {
        console.error('获取列表失败:', error)
    }
}

const handleClick = (row) => {
    router.push(`/help/detail/${row.id}`)
}

const handlePageChange = (val) => {
    page.value = val
    fetchList()
}

onMounted(fetchList)
</script>

<style scoped>
.help-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    background: #f8f9fa;
    min-height: 100vh;
}

.header-section {
    text-align: center;
    margin-bottom: 40px;
    padding: 40px 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 16px;
    color: white;
    box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);
}

.page-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0 0 10px 0;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.page-subtitle {
    font-size: 1.1rem;
    margin: 0 0 30px 0;
    opacity: 0.9;
}

.create-btn {
    background: rgba(255,255,255,0.2);
    border: 2px solid rgba(255,255,255,0.3);
    font-size: 1.1rem;
    padding: 12px 30px;
    border-radius: 25px;
    transition: all 0.3s ease;
}

.create-btn:hover {
    background: rgba(255,255,255,0.3);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.2);
}

.posts-container {
    display: grid;
    gap: 20px;
    margin-bottom: 40px;
}

.post-card {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    cursor: pointer;
    border: 1px solid #e9ecef;
}

.post-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.15);
    border-color: #667eea;
}

.post-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-avatar {
    border: 3px solid #f8f9fa;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.user-details {
    display: flex;
    flex-direction: column;
}

.username {
    font-weight: 600;
    color: #2c3e50;
    font-size: 1rem;
}

.post-time {
    font-size: 0.85rem;
    color: #6c757d;
    margin-top: 2px;
}

.post-content {
    margin-bottom: 16px;
}

.post-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #2c3e50;
    margin: 0;
    line-height: 1.4;
    cursor: pointer;
}

.post-title:hover {
    color: #667eea;
}

.post-footer {
    border-top: 1px solid #e9ecef;
    padding-top: 16px;
}

.post-stats {
    display: flex;
    gap: 20px;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #6c757d;
    font-size: 0.9rem;
    cursor: pointer;
    transition: color 0.2s ease;
}

.stat-item:hover {
    color: #667eea;
}

.stat-item i {
    font-size: 1rem;
}

.pagination-container {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .help-container {
        padding: 10px;
    }

    .header-section {
        padding: 30px 15px;
    }

    .page-title {
        font-size: 2rem;
    }

    .post-card {
        padding: 20px;
    }
}
</style>